<template>
    <view>
        <scroll-view class="grace-tab-title grace-body" scroll-x="true" id="grace-tab-title" :scroll-into-view="titleShowId">
            <view v-for="(tab, index) in tabs" 
			:key="index" :class="[tabCurrentIndex == index ? 'grace-tab-current' : '']" 
			:id="'tabTag-'+index" @tap="tabChange">{{tab.txt}}</view>
        </scroll-view>
        <swiper class="grace-body" 
		:current="swiperCurrentIndex" 
		@change="swiperChange" 
		:style="{height:tabHeight+'px'}">
            <!-- 循环新闻项目 -->
            <swiper-item v-for="(news, newsIndex) in newsAll" :key="newsIndex">
                <scroll-view scroll-y="true" @scrolltolower="scrollend" :style="{height:tabHeight+'px'}">
					<block v-for="(item, index) in news" :key="index">
						<navigator class="grace-news-list" v-if="item.imgs.length < 3">
							<view class="item">
								<view class="img img-l">
									<image :src="item.imgs[0]" mode="widthFix"></image>
								</view>
								<view class="body">
									<view class="title">{{item.title}}</view>
									<view class="desc">描述信息......</view>
								</view>
							</view>
							<view class="desc">
								<text class="grace-icons icon-eye"></text> 9999
								<text class="grace-icons icon-write" style="margin-left:10px;"></text> graceui
								<text style="float:right;">99</text>
								<text class="grace-icons icon-zan" style="float:right; margin-right:6px;"></text>
							</view>
						</navigator>
						<navigator class="grace-news-list" v-if="item.imgs.length >= 3">
							<view class="title">{{item.title}}</view>
							<view class="imgs">
								<image :src="img" v-for="(img,imgIndex) in item.imgs" :key="imgIndex" mode="widthFix"></image>
							</view>
							<view class="desc">
								<text class="grace-icons icon-eye"></text> 9999
								<text class="grace-icons icon-write" style="margin-left:10px;"></text> graceui
								<text style="float:right;">99</text>
								<text class="grace-icons icon-zan" style="float:right; margin-right:6px;"></text>
							</view>
						</navigator>
					</block>
                    <graceLoading :loadingType="tabs[newsIndex].loadingType"></graceLoading>
                </scroll-view>
            </swiper-item>
        </swiper>
    </view>
</template>
<script>
import graceLoading from "../../graceUI/components/graceLoading.vue"
export default {
    data() {
		props:{
			tabHeight:Number
		}
        return {
            tabCurrentIndex: 0,
            swiperCurrentIndex: 0,
           
			//分类数据
            tabs : [],
			// 新闻信息保存数组
			newsAll : [],
            titleShowId : 'tabTag-0'
        }
    },
    onLoad:function(){
		uni.request({
			// 此处可以获取分类 根据分类自己拼接请求地址
			// 格式请参考 接口 [ 浏览器运行直接查看 ]
			url: 'https://www.easy-mock.com/mock/5cb9655c01e2e57715d324b0/example/cate#!method=get',
			method: 'GET',
			data: {},
			success: res => {
				this.tabs = res.data;
				// 初始化新闻列表数组 元素数量与分类匹配
				for(var i = 0; i < this.tabs.length; i++){
					this.newsAll.push([]);
				}
				this.getNews();
			}
		});
    },
    onReady: function () {
        //获取屏幕高度及比例
        var winInfo = uni.getSystemInfo({
            success : res => {
                var windowHeight = res.windowHeight;
                //获取头部标题高度
                var dom = uni.createSelectorQuery().select('#grace-tab-title')
                dom.fields({size: true}, res2 => {
                    //计算得出滚动区域的高度
                    this.tabHeight = windowHeight - res2.height;
                }).exec();
            }
        });
    },
	// 下拉刷新事件
    onPullDownRefresh: function (){
		// 页码重置 
		this.tabs[this.tabCurrentIndex].page = 1;
		this.getNews();
    },
    methods:{
        tabChange: function (e) {
            var index = e.target.id.replace('tabTag-', '');
            this.swiperCurrentIndex = index;
            this.tabCurrentIndex    = index;
            this.titleShowId        = 'tabTag-'+index;
			if(this.tabs[this.tabCurrentIndex].page == 1){
				this.getNews();
			}
        },
        swiperChange: function(e){
            var index = e.detail.current;
            this.tabCurrentIndex = index;
            this.titleShowId        = 'tabTag-'+index;
			if(this.tabs[this.tabCurrentIndex].page == 1){
				this.getNews();
			}
        },
        //每个选项滚动到底部
        scrollend:function(e){
			console.log('loadmore.....');
			// 判断加载状态避免多次滚动时有加载尚未完成
			if(this.tabs[this.tabCurrentIndex].loadingType > 0){return false;}
			this.getNews();
        },
		// 加载新闻
		getNews : function(){
			// 当前正在展示的 选项index 为 this.tabCurrentIndex
			// 那么分类 id 应该为 this.tabs[this.tabCurrentIndex].cateId
			console.log('选项对应的页码分类id :', this.tabs[this.tabCurrentIndex].cateId);
			// 当前选项加载到多少页的页码
			console.log('选项对应的页码 :', this.tabs[this.tabCurrentIndex].page);
			this.tabs[this.tabCurrentIndex].loadingType = 1;
			uni.request({
				// 此处可以获取分类 根据分类自己拼接请求地址
				// 分类 id 、页码 都已经获取到了
				url: 'https://www.easy-mock.com/mock/5cb9655c01e2e57715d324b0/example/imgnewlist#!method=get',
				method: 'GET',
				data: {},
				success: res => {
					// 假设第5页就是加载全部实际过程应该是根据api 返回值决定
					if(this.tabs[this.tabCurrentIndex].page >= 5){
						this.tabs[this.tabCurrentIndex].loadingType = 2;
					}
					// 第一页
					else if(this.tabs[this.tabCurrentIndex].page == 1){
						this.newsAll.splice(this.tabCurrentIndex, 1, res.data.data);
						this.tabs[this.tabCurrentIndex].loadingType = 0;
						 uni.stopPullDownRefresh();
					}
					// 加载其他页
					else{
						this.newsAll[this.tabCurrentIndex] = this.newsAll[this.tabCurrentIndex].concat(res.data.data);
						this.tabs[this.tabCurrentIndex].loadingType = 0;
					}
					this.tabs[this.tabCurrentIndex].page ++;
				}
			});
		}
    },
    components:{
        graceLoading
    }
}
</script>
<style>
page{background:#FFFFFF;}
.grace-news-list .imgs{height:150rpx; overflow:hidden; border-radius:0;}
image{border-radius:0 !important;}
</style>